<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rust练习智能体</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/practice.css') }}">
</head>
<body>
    <div class="container">
        <header>
            <h1>Rust练习智能体</h1>
            <p class="subtitle">选择知识点和难度，生成个性化Rust编程练习</p>
        </header>

        <main>
            <section class="exercise-generator">
                <h2>生成练习</h2>
                <form id="exercise-form">
                    <div class="form-group">
                        <label for="topic">Rust知识点</label>
                        <select id="topic" name="topic" required>
                            <option value="" disabled selected>请选择知识点</option>
                            <optgroup label="基础概念">
                                <option value="variables">变量与可变性</option>
                                <option value="data_types">数据类型</option>
                                <option value="functions">函数</option>
                                <option value="control_flow">控制流</option>
                            </optgroup>
                            <optgroup label="所有权系统">
                                <option value="ownership">所有权</option>
                                <option value="borrowing">借用与引用</option>
                                <option value="slices">切片类型</option>
                                <option value="lifetimes">生命周期</option>
                            </optgroup>
                            <optgroup label="结构化数据">
                                <option value="structs">结构体</option>
                                <option value="enums">枚举</option>
                                <option value="pattern_matching">模式匹配</option>
                            </optgroup>
                            <optgroup label="模块系统">
                                <option value="modules">模块</option>
                                <option value="crates">包和Crate</option>
                                <option value="paths">路径</option>
                            </optgroup>
                            <optgroup label="集合">
                                <option value="vectors">向量</option>
                                <option value="strings">字符串</option>
                                <option value="hashmaps">哈希映射</option>
                            </optgroup>
                            <optgroup label="错误处理">
                                <option value="error_handling">错误处理</option>
                                <option value="result_option">Result与Option</option>
                            </optgroup>
                            <optgroup label="泛型与特征">
                                <option value="generics">泛型</option>
                                <option value="traits">特征</option>
                                <option value="trait_objects">特征对象</option>
                            </optgroup>
                            <optgroup label="高级特性">
                                <option value="closures">闭包</option>
                                <option value="iterators">迭代器</option>
                                <option value="smart_pointers">智能指针</option>
                                <option value="concurrency">并发编程</option>
                                <option value="unsafe_rust">不安全Rust</option>
                                <option value="macros">宏</option>
                            </optgroup>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="difficulty">难度级别</label>
                        <div class="difficulty-selector">
                            <input type="radio" id="beginner" name="difficulty" value="beginner" checked>
                            <label for="beginner" class="difficulty-label beginner">初级</label>
                            
                            <input type="radio" id="intermediate" name="difficulty" value="intermediate">
                            <label for="intermediate" class="difficulty-label intermediate">中级</label>
                            
                            <input type="radio" id="advanced" name="difficulty" value="advanced">
                            <label for="advanced" class="difficulty-label advanced">高级</label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="exercise_type">练习类型</label>
                        <div class="exercise-type-selector">
                            <input type="radio" id="concept" name="exercise_type" value="concept" checked>
                            <label for="concept" class="exercise-type-label">概念理解</label>
                            
                            <input type="radio" id="implementation" name="exercise_type" value="implementation">
                            <label for="implementation" class="exercise-type-label">代码实现</label>
                            
                            <input type="radio" id="debugging" name="exercise_type" value="debugging">
                            <label for="debugging" class="exercise-type-label">代码调试</label>
                            
                            <input type="radio" id="optimization" name="exercise_type" value="optimization">
                            <label for="optimization" class="exercise-type-label">代码优化</label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="additional_requirements">额外要求（可选）</label>
                        <textarea id="additional_requirements" name="additional_requirements" 
                                  placeholder="例如：使用特定的Rust特性、限制使用某些功能等"></textarea>
                    </div>

                    <div class="form-actions">
                        <button type="submit" id="generate-btn" class="btn primary">生成练习</button>
                        <button type="reset" class="btn secondary">重置</button>
                    </div>
                </form>
            </section>

            <section class="exercise-display" id="exercise-display" style="display: none;">
                <div class="exercise-header">
                    <h2 id="exercise-title">练习标题</h2>
                    <div class="exercise-meta">
                        <span class="topic-badge" id="exercise-topic">知识点</span>
                        <span class="difficulty-badge" id="exercise-difficulty">难度</span>
                    </div>
                </div>

                <div class="exercise-content">
                    <div class="exercise-description" id="exercise-description">
                        <!-- 练习描述将在这里显示 -->
                    </div>
                    
                    <div class="code-editor-container">
                        <h3>代码编辑器</h3>
                        <div class="code-editor-header">
                            <span>main.rs</span>
                            <div class="editor-actions">
                                <button id="run-code" class="btn small">运行代码</button>
                                <button id="submit-solution" class="btn small primary">提交解答</button>
                            </div>
                        </div>
                        <div class="code-editor" id="code-editor">
                            <pre><code id="code-area" contenteditable="true">fn main() {
    // 在这里编写你的代码
    println!("Hello, Rust!");
}</code></pre>
                        </div>
                    </div>
                    
                    <div class="output-container" id="output-container" style="display: none;">
                        <h3>输出结果</h3>
                        <div class="output" id="output-area">
                            <!-- 输出结果将在这里显示 -->
                        </div>
                    </div>
                </div>

                <div class="exercise-actions">
                    <button id="new-exercise-btn" class="btn secondary">生成新练习</button>
                    <button id="show-hint-btn" class="btn">显示提示</button>
                </div>
            </section>

            <section class="feedback-section" id="feedback-section" style="display: none;">
                <h2>代码评估结果</h2>
                
                <div class="score-container">
                    <div class="score-circle" id="score-circle">
                        <span id="score-value">85</span>
                    </div>
                    <div class="score-label">总分</div>
                </div>
                
                <div class="feedback-details">
                    <div class="feedback-summary" id="feedback-summary">
                        <!-- 反馈摘要将在这里显示 -->
                    </div>
                    
                    <div class="feedback-categories">
                        <div class="feedback-category">
                            <h3>代码优点</h3>
                            <ul id="code-strengths">
                                <!-- 代码优点将在这里显示 -->
                            </ul>
                        </div>
                        
                        <div class="feedback-category">
                            <h3>改进建议</h3>
                            <ul id="improvement-suggestions">
                                <!-- 改进建议将在这里显示 -->
                            </ul>
                        </div>
                    </div>
                    
                    <div class="solution-container" id="solution-container" style="display: none;">
                        <h3>参考解答</h3>
                        <div class="solution-code" id="solution-code">
                            <!-- 参考解答将在这里显示 -->
                        </div>
                    </div>
                </div>
                
                <div class="feedback-actions">
                    <button id="try-again-btn" class="btn secondary">重新尝试</button>
                    <button id="show-solution-btn" class="btn">查看参考解答</button>
                    <button id="next-exercise-btn" class="btn primary">下一个练习</button>
                </div>
            </section>
        </main>

        <footer>
            <p>Rust练习智能体 &copy; 2025 | 基于大模型技术</p>
        </footer>
    </div>

    <div class="modal" id="hint-modal">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <h3>练习提示</h3>
            <div id="hint-content">
                <!-- 提示内容将在这里显示 -->
            </div>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/practice.js') }}"></script>
</body>
</html>